<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button>
    <script>
        // let btns = document.querySelectorAll('button');

        // for(var i=0;i<btns.length;i++){
        
        //     btns[i].onclick = function(){
        //         alert(i);  每个都是5 
        //     }
        // }


        // 解决方案  
        // var 换成 let  
        // for 换成 forEach
        // 给每个按钮编号 


        // 新的解决方案  闭包  

        // (function(num1){
        //     console.log(num1+100);
        // })(666)


        // function outer(num1){
        //     let num2 = 100;
        //     function inner(){
        //         return num1+num2
        //     }
        //     return inner;
        // }


        // const res = outer(666); // inner 
        // console.log( res());


        // (function(num1){ 
        //     let num2=100;
        //     return function(){
        //         console.log(num1+num2)
        //     }
        // })(777)()



        let btns = document.querySelectorAll('button');

        for(var i=0;i<btns.length;i++){
        
           btns[i].onclick = (function(num){
                return function(){
                    alert(num)
                }
           })(i)
        }

       
    </script>

</body>
</html>